<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin-bottom: 800px;
        }
        input[type=radio],input[type=checkbox]{
            width: 30px;
            height: 30px;
            vertical-align: middle;
        }
    </style>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- <textarea id="aa" cols="30" rows="10">dasdasdsad</textarea> -->
    <!-- <table id="table">
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
        </tr>
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
        </tr>
    </table> -->
    <hr>
    <!-- 
        语法糖：代码中将一些固定的操作逻辑封装成一个简单的调用规则，该规则的语法就被叫做语法糖
    -->
    <!-- 
        v-model 是vue 的页面操作语法的一个 内置语法糖 (等量替换 v-bind 和 v-on 对表单元素的同时操作 )
        - 取值：随表单控件类型不同而不同。
        - 限制：仅限于HTML表单元素，<input>、<select> 、<textarea>等
        - 语法：<input type="text" v-model="name">
        - 修饰符：
            - .lazy 取代 input 监听 change 事件
            - .number 输入字符串转为有效的数字
            - .trim  输入首尾空格过滤
    -->
    <div id="app">
        <input type="text" v-bind:value="msg">
        <h3>msg:{{ msg }}</h3>
        <input type="text" v-bind:value="msg" v-on:input=" msg=$event.target.value "><br>
        <input type="text" v-model="msg"><br>
        <hr>
        <h2>1、单行文本框的操作</h2>
        <pre>
            v-model 对于单行文本框而言，主要完成以下两个操作
                a、对单行文本框完成 value 默认值绑定
                b、对单行文本框完成 默认 input 事件的绑定
            ! 对于input type取值为非 file 、button 、radio 、checkbox……  的标签而言，vue的v-model 绑定原则一致
        </pre>
        <p>info:{{ info }}</p>
        <input type="text" v-model="info"><br><br>
        <!-- <input type="color" value="#cccccc"  > -->
        <p :style=" `color:${color}` ">color:{{ color }}</p>
        <input type="color" v-model="color"><br><br>
        <p style="background-color: #cccccc;" :style=" `width:${size}%` ">size:{{ size }}</p>
        <input type="range" min="0" max="100" step="1" v-model="size"><br><br>
        <p>day:{{ day }}</p>
        <!-- <input type="date" value="2020-12-01"> -->
        <input type="date" v-model="day">
        <hr>
        <h2>2、多行文本域的操作</h2>
            v-model 对于单行文本框而言，主要完成以下两个操作
                a、对多行文本域完成 DOM 对象的 value 默认值绑定
                b、对多行文本域完成 默认 input 事件的绑定
            !! 记录的数据具有换行转义符。同时可以识别换行转义符
            !! 多行文本域完成 v-model 绑定后，标签中的内容将失去作用
        <pre>text1:{{ text1 }}</pre>
        <textarea cols="30" rows="10" :value="text1" @input="text1=$event.target.value"></textarea>
        <textarea cols="30" rows="10" v-model="text1">{{ msg }}</textarea>
        <hr>
        <h2>3、下拉列表</h2>
        <pre>
            v-model 对于下拉列表而言，主要完成以下两个操作
                a、对下拉列表完成 DOM 对象的 value 默认值绑定 （options选中功能-由JS-DOM 特性自行完成）
                b、对下拉列表完成 默认 change 事件的绑定
            !! v-model 只需要关系 select 元素即可
        </pre>
        <p>selectData:{{ selectData }}</p>
        <select id="sel" style="width: 200px; height: 50px; font-size: 28px;"
            :value="selectData" @change=" selectData = $event.target.value "
        >
            <option value="">请选择</option>
            <option value="a">AA</option>
            <option value="b">BB</option>
            <option value="c">CC</option>
            <option>DD</option>
            <option value="e">EE</option>
        </select>
        <select id="sel" style="width: 200px; height: 50px; font-size: 28px;"
            v-model="selectData"
        >
            <option value="">请选择</option>
            <option value="a">AA</option>
            <option value="b">BB</option>
            <option value="c">CC</option>
            <option>DD</option>
            <option value="e">EE</option>
        </select>
        <h2>4、单选按钮</h2>
        <pre>
            HTML 和 JS 本身的特性
                a、页面的选中状态和 checked 属性取值有关
                b、单选按钮的 value 属性用于描述当前选择框的 取值 , 当单选按钮没有提供value时默认值为on
                c、对单选按钮绑定 change 事件，可以记录当前被选中的 单选按钮对应的数据值
            v-model 对于 单选按钮完成如下两步操作
                a、完成单选按钮的 checked 属性绑定 - 将当前单选按钮的 value 和 绑定的变量的值进行比较，比较结果描述checked
                b、完成单选按钮 change 事件绑定-事件触发时，将当前单选按钮的 value值赋值给绑定的变量
            !! vue 中单选按钮的分组，由绑定的变量决定
            !! vue 完成单选按钮绑定时，如果没有提供value属性值时，默认绑定value值为null,而checked取值为 变量==null
        </pre>
        <input type="radio" value="a" name="aa" @change=" printRadioValue( $event.target.value ) ">
        <input type="radio" value="b" name="aa" @change=" printRadioValue( $event.target.value ) ">
        <input type="radio" value="c" name="aa" @change=" printRadioValue( $event.target.value ) ">
        <input type="radio" value="d" name="aa" @change=" printRadioValue( $event.target.value ) ">
        <hr>
        <input type="text" :disabled="radioData1">
        <p>radioData1:{{ radioData1 }}</p>
        <!-- v-bind 对于 checked selected 属性的绑定，不进行转换操作 -->
        选项1<input type="radio" value="选项1" 
                :checked="radioData1=='选项1'" @change=" radioData1=$event.target.value "
        ><br>
        选项2<input type="radio" value="选项2" 
                :checked="radioData1=='选项2'" @change=" radioData1=$event.target.value "
        ><br>
        选项3<input type="radio" value="选项3" 
                :checked="radioData1=='选项3'" @change=" radioData1=$event.target.value "
        ><br>
        选项4<input type="radio" value="选项4" 
                :checked="radioData1=='选项4'" @change=" radioData1=$event.target.value "
        ><br><br>
        <p>radioData2:{{ radioData2 }}</p>
        <!-- v-bind 对于 checked selected 属性的绑定，不进行转换操作 -->
        选项1<input type="radio" value="选项1" v-model="radioData2"><br>
        选项2<input type="radio" value="选项2" v-model="radioData2"><br>
        选项3<input type="radio" value="选项3" v-model="radioData2"><br>
        选项4<input type="radio" value="选项4" v-model="radioData2"><br>
        <hr>
        <p>radioData3:{{ radioData3 }}</p>
        <!-- v-bind 对于 checked selected 属性的绑定，不进行转换操作 -->
        选项1<input type="radio" v-model="radioData3"><br>
        选项2<input type="radio" v-model="radioData3"><br>
        选项3<input type="radio" v-model="radioData3"><br>
        选项4<input type="radio" value="选项4" v-model="radioData3"><br>
        <hr>
        <h5>性别：{{ sex }}</h5>
        未知：<input type="radio" value="" v-model="sex"><br>
        男：<input type="radio" value="男" v-model="sex"><br>
        女：<input type="radio" value="女" v-model="sex"><br>
        <h2>5、复选按钮</h2>
        <pre>
            HTML 和 JS 本身的特性
                a、页面的选中状态和 checked 属性取值有关
                b、复选按钮的 value 属性用于描述当前选择框的 取值 , 当复选按钮没有提供value时默认值为on
                c、对复选按钮绑定 change 事件，可以记录当前被选中的 复选按钮对应的数据值
            v-model 对于 复选按钮完成如下两步操作
                a、完成复选按钮的 checked 属性绑定 - 将当前复选按钮的 value 和 绑定的变量的记录值进行比较，比较结果描述checked
                b、完成复选按钮 change 事件绑定-事件触发时，将当前复选按钮的 value值到绑定的变量中
            !! vue 中复选按钮的分组，由绑定的变量决定
            !! v-model 取值类型决定了 复选框的操作特性
                + 取值为数组，表示记录多个值，此时 value有效
                + 取值为非数组，表示记录状态，此时 value无效，true-value 和false-value 自定义属性有效
            !! vue 完成复选按钮绑定时，如果没有提供value属性值时：
                + 且绑定的变量为 非数组数据  默认提供选中true 和未选中 false 的描述
                    - 通过定义 true-value 和 false-value 属性可以改变选中和未选中值                        
                + 如果帮的变量为 数组数据 默认为所有复选框的 value 提供 null 作为数据
        </pre>
        <p>checkData1:{{ checkData1 }}</p>
        <input type="checkbox" v-model="checkData1">
        <input type="checkbox" v-model="checkData1">
        <input type="checkbox" v-model="checkData1">
        <input type="checkbox" v-model="checkData1">
        <hr>
        <p>checkData2:{{ checkData2 }}</p>
        <input type="checkbox" value="html" v-model="checkData2">
        <input type="checkbox" value="css" v-model="checkData2">
        <input type="checkbox" value="javascript" v-model="checkData2">
        <input type="checkbox" value="vue" v-model="checkData2">
        <hr>
        <p>checkData3：{{ checkData3 }}</p>
        <input type="checkbox" true-value="同意" false-value="不同意" v-model="checkData3">
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"默认变量msg",
            info:"info",
            color:"#cccccc",
            size:50,
            day:"2020-12-01",
            text1:"aaaa\nbbbbb",
            selectData:"",
            radioData1:"",
            radioData2:"",
            radioData3:"",
            sex:"",
            checkData1:"",
            // checkData1:[],
            // checkData2:""
            checkData2:["css","vue"],
            checkData3:""
        },
        methods: {
            printRadioValue(v){
                console.log(v);
            }
        },
    })
</script>
</html>